<form class="layui-form" method="post">
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">主机商：</label>
        <div class="layui-input-inline">
            <if condition="$date['img_id'] neq null">
             <span style="display: block;  padding: 9px 0px;">{$date['tyepname']}</span>
            <else/>
                <select name="serverid" lay-verify="required" lay-filter="service">
                    <option value=""></option>
                    <volist name=":C('ServerProvider')" id="vo">
                        <option value="{$vo['val']}" <if condition="!$vo['is_display']">disabled</if> >{$key}</option>
                    </volist>
                </select>
            </if>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">镜像区域：</label>
        <if condition="$date['img_id'] neq null">
            <span style="display: block;  padding: 9px 0px;">{$date['img_regions'][1]}</span>
            <else/>
            <div class="layui-input-inline" >
                <select name="imgregions" lay-filter="imgregions" lay-verify="" id="imgregions">
                    <option value="">请选择主机商</option>
                </select>
            </div>
           <!-- <div class="layui-input-inline" >
                <select name="zone" lay-filter="zone" lay-verify="" id="zone">
                    <option value="">请选择主机商地域</option>
                </select>
            </div>-->
        </if>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">镜像选择：</label>
        <if condition="$date['img_id'] neq null">
            <span style="display: block;  padding: 9px 0px;">{$date['img_name']}</span>
            <else/>
        <div class="layui-input-block" id="imglow" >

        </div>
        </if>
    </div>
    <if condition="$date['img_id'] neq null">
        <div class="layui-form-item">
            <label class="layui-form-label">镜像选择：</label>
            <div class="layui-input-block">
        <input type="checkbox" name="isstatus" <if condition="$date['img_status'] eq 1">checked</if> lay-skin="switch" lay-text="开启|关闭">
            </div>
    </if>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="sitesub">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    var zoneurl="{:U('MyService/zone')}";
    var imgurl="{:U('MyService/imgGetlow')}";
    form.render();
    var isover=[];
    var list={};
    var name='';
    var serid='';
    var zoneid='';
    form.on('select(service)',function(data){
        name='';
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        isover=[];
        $('#imglow').html('');
       // $('#zone').html('<option value="">请选择主机商地域</option>');

        serid=data.value;
        $.post(zoneurl,{keyid:data.value},function(data){
            layer.close(loadahsde);
            if(data.code == '4001'){
                $('#imgregions').html('<option value="">请选择</option>');
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                $html='<option>请选择</option>';
                layui.each(data.data,function(key,item){
                  $html+='<option value="'+item.region+'">'+item.name+'</option>'
                });
                $('#imgregions').html($html);
            }else{
                $('#imgregions').html('<option value=""></option>');
                layer.msg("数据错误",{icon: 5});
                return;
            }
            form.render('select');
        });
    });

  /*  form.on('select(imgregions)',function(data){
        zoneid=data.value;
        $('#imglow').html('');
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        $.post(regurl,{keyid:serid,regionsid:zoneid},function(data){
            layer.close(loadahsde);
            if(data.code == '4001'){
                $('#zone').html('<option value="">请选择</option>');
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                $html='';
                $html='<option value="">请选择</option>';
                layui.each(data.data,function(key,item){
                    $html+='<option value="'+item.availabilityZoneName+'">'+item.availabilityZoneName_CN+'</option>'
                });
                $('#zone').html($html);
            }else{
                $('#zone').html('<option value="">请选择</option>');
                layer.msg("数据错误",{icon: 5});
                return;
            }
            form.render();
        });

    });*/

    form.on('select(imgregions)',function(data){
        name=data.elem[data.elem.selectedIndex].text;
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        $('#imglow').html('');
        isover=[];
        $.post(imgurl,{keyid:serid,regions:data.value},function(data){
            list={};
            layer.close(loadahsde);
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                list=data.data
                $html='';
                layui.each(data.data,function(key,item){
                    if(item.is_over ==1 ){
                        $html+=' <input type="checkbox" lay-filter="tempimg" name="imgid['+item.templateId+']" disabled title="'+item.templateName+'">';
                    }else{
                        $html+=' <input type="checkbox" lay-filter="tempimg" name="imgid['+item.templateId+']" title="'+item.templateName+'">';
                    }
                });
                $('#imglow').html($html);
                form.render();
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        });
    });
    form.on('checkbox(tempimg)', function(data){
        layui.each(list,function(key,item){
            if(data.elem.checked){
                if(item.templateName == data.elem.title){
                    isover.push({'imgid':item.templateId,'name':data.elem.title});
                }
            }if(!data.elem.checked){
                if(item.templateName == data.elem.title){
                    layui.each(isover,function(k,v){
                        if(data.elem.title == v.name){
                            isover.splice(k,1);
                        }
                    });
                }
            }
        })
    });

    form.on('submit(sitesub)', function(data){
        var userInfo = data.field;
        userInfo['title']=isover;
        userInfo['imgregionstitle']=name;
        var url = "__SELF__";
        $.post(url,userInfo,function(data){
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                layer.msg(data.msg, {
                    icon: 6,
                    time: 2000
                }, function(){
                    location.reload();
                });
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        });

        return false;
    });

</script>